import React from 'react'
import { Flex } from 'antd-mobile'

//导入高阶组件
import { withRouter } from 'react-router-dom'
//导入校验规则
import { PropTypes } from 'prop-types'

//导入scss样式
import './index.scss'


class SearchHeader extends React.Component {
    constructor(props) {
        super(props)
        this.state = {}
    }
    render() {
        console.log(this.props);
        return (
            <Flex className={['search-box', this.props.className || ''].join(' ')}>
                {/* 左侧白色区域 */}
                <Flex className='search'>
                    {/* 位置 */}
                    <div className="location" onClick={() => this.props.history.push('/cityList')} >
                        <span className="name" >{this.props.currentCity}</span>
                        <i className="iconfont icon-arrow" />
                    </div>

                    {/* 搜索表单 */}
                    <div className="form" onClick={() => this.props.history.push('/search')}>
                        <i className="iconfont icon-seach" />
                        <span className="text">请输入小区或地址</span>
                    </div>
                </Flex>
                {/* 右侧地图图标 */}
                <i className="iconfont icon-map" onClick={() => this.props.history.push('/map')} />
            </Flex>
        )
    }
}

SearchHeader.propTypes = {
    currentCity: PropTypes.string.isRequired,
    className: PropTypes.string
}


export default withRouter(SearchHeader)
